<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas</title>
  <style>
  </style>
</head>

<body>
<canvas id="canvas" height="150px" width="150px"></canvas>
 
  <script>
var canvas=document.getElementById("canvas");
if(canvas.getContext)
var ctx=canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
let isdraw=false;
let lastX=0;
let lastY=0;
ctx.lineWidth = 90;
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.strokeStyle="#f00";
ctx.fillStye="#f00";
let hue=0;
let direction=false;
let x=0;
let y=0;
function draw(e){
if(!isdraw) return;
x=e.offsetX;
Y=e.offsetY;
//彩虹
ctx.strokeStyle=`hsl(${hue},90%,50%)`;
if(hue>=360) hue=0;
hue++;


ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.stroke();
[lastX,lastY]=[x,y];

}
canvas.addEventListener('mousedown',(e)=>{
isdraw=true;
[lastX,lastY]=[e.offsetX,e.offsetY];

});
canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mouseup',()=>isdraw=false);
canvas.addEventListener('mouseup',()=>isdraw=false);
  </script>

</body>

</html>